<template>
	<view>
		<view class="header_wrap">
			<view class="header_top br">
				<!-- <view class="avatar">
					<img src="https://fakeimg.pl/166x110/">
				</view>

				<view class="mine_msg">
					<p>昵称:Andy</p>
					<p>账户类型:苗木供应商<text class="identify">(已认证)</text></p>
					<p>绑定手机号:1234567891</p>
				</view>

				<view class="icon_setup">
					<img src="https://fakeimg.pl/75x75/">
				</view> -->
				<view style="display: flex;align-items: center;">
					<view class="avtar">
						<img src="https://fakeimg.pl/250x100/">
					</view>
					<view  class=" user_msg_wrap">
						<view class="user_msg">
							<view class="top">
								<!-- <img src="https://fakeimg.pl/250x100/"> -->
								<van-icon name="setting-o" color="#fff" @click="set"/>
							</view>
							<view class="bottom">
								<p>昵称:Andy</p>
								<p>账号类型:苗木供应商<text>(已认证)</text></p>
								<p>绑定手机号:1234567891</p>
							</view>
						</view>

					</view>


				</view>




			</view>

			
		
		</view>
		
		<view class="header_bottom_wrap ">
			<view class="header_bottom ">
				<van-row custom-class="hb">
					<van-col span="8" custom-class="img_col">
						<view>今日交易量</view>
						<view class="fs42 fw">150</view>
					</van-col>
					<van-col span="8" custom-class="img_col">
						<view>今日交易量</view>
						<view class="fs42 fw">150</view>
					</van-col>
					<van-col span="8" custom-class="img_col">
						<view>今日交易量</view>
						<view class="fs42 fw">150</view>
					</van-col>
		
				</van-row>
		
			</view>
		</view>
				
		
		<view class="main_wrap ">
			<view class="main br">
				<van-row custom-class="icons">
					<van-col span="6" custom-class="icons_col">
						<img src="https://fakeimg.pl/250x100/">
						<view class="fs26">销售开单</view>
					</van-col>
					<van-col span="6" custom-class="icons_col">
						<img src="https://fakeimg.pl/250x100/">
						<view class="fs26">销售开单</view>
					</van-col>
					<van-col span="6" custom-class="icons_col">
						<img src="https://fakeimg.pl/250x100/">
						<view class="fs26">销售开单</view>
					</van-col>
					<van-col span="6" custom-class="icons_col">
						<img src="https://fakeimg.pl/250x100/">
						<view class="fs26">销售开单</view>
					</van-col>
					<van-col span="6" custom-class="icons_col">
						<img src="https://fakeimg.pl/250x100/">
						<view class="fs26">销售开单</view>
					</van-col>
					<van-col span="6" custom-class="icons_col">
						<img src="https://fakeimg.pl/250x100/">
						<view class="fs26">销售开单</view>
					</van-col>
					<van-col span="6" custom-class="icons_col">
						<img src="https://fakeimg.pl/250x100/">
						<view class="fs26">销售开单</view>
					</van-col>
					<van-col span="6" custom-class="icons_col">
						<img src="https://fakeimg.pl/250x100/">
						<view class="fs26">销售开单</view>
					</van-col>
				</van-row>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {

			}
		},
		components: {
			
		},
		methods: {
			set(){
				uni.navigateTo({url:'../phone_set/phone_set'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	
	

	.header_wrap {
		position: relative;
		
		background-color: #03bb7a;
		
		.header_top {
			height: 380rpx;
			// background-color: #bfa;
			// padding: 88rpx 35rpx 0 33rpx;
			// background-color: blue;
			box-sizing: border-box;
			padding: 50rpx 33rpx 0;
			
			.avtar {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				// padding-top: 100rpx;

				&>img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;

				}
			}

			.user_msg_wrap {
				width: 100%;
				.user_msg {
					// padding-top: 30rpx;
					.top {
						display: flex;
						justify-content: flex-end;

						img {
							width: 50rpx;
							height: 50rpx;
						}
					}
					.bottom{
						font-size: 26rpx;
						line-height: 60rpx;
						margin-left: 30rpx;
						color: #fff;
					}
				}
			}
		}

		
	}
	
	
	.header_bottom_wrap {
		
		position: relative;
		// bottom: -100rpx;
		bottom: 60rpx;
		
		box-sizing: border-box;
		padding: 0 30rpx;
	
		.header_bottom {
			// 代表每一行
			width: 100%;
			background-color: #fff;
			// height: 200rpx;
			border-radius: 16rpx;
			text-align: center;
			padding: 30rpx 0;
			border: 1px solid #bbbbbb;
			
			// display: flex;
			// align-items: center;
			
			
	
			/deep/ .hb {
				text-align: center;
				font-size: 34rpx;
				// padding-top: 20rpx;
				width: 100%;
				font-size: 26rpx;
				line-height: 34rpx;
				
				&:last-child{
					border-right: none !important;
				}
				
				// 代表每一列
				.img_col {
					
					
					
					border-right: 1px solid #bbbbbb;
					margin: 20rpx 0;
					line-height: 60rpx;
					
				
					
					
				}
				
				
				
				
	
			}
	
	
		}
	}
		
	
	.main_wrap {
		// margin-bottom: 30rpx;
		// margin-top: 150rpx;
		// margin-top: 80rpx;
		padding: 0 20rpx;

		// padding: 20rpx;
		.main {
			// height: 400rpx;
			border-radius: 10rpx;
			// background-color: #bfa;
			border: 1px solid #bbbbbb;
			// padding: 38rpx 0;
			text-align: center;




			.icons {
				width: 100%;
				text-align: center;
				font-size: 35rpx;
				
			}

			/deep/.icons_col {
				// height: 200rpx;
				
				padding: 40rpx 0;
				
				
				
				&>img {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
</style>
